<template>
  <el-card class="single">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="题目" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="form.must">必填</el-checkbox>
        <span style="margin-left: 20px" v-if="signup"
          >选项内容右方选择选项限选人数 若不限选则填0</span
        >
      </el-form-item>
      <el-form-item
        v-for="(choice, i) in form.options"
        :label="'选项' + (i + 1)"
        :key="i"
        :prop="'options.' + i + '.title'"
        :rules="{
          required: true,
          message: '选项不能为空',
          trigger: 'blur',
        }"
      >
        <el-input
          v-if="signup"
          style="width: 40%; margin-right: 20px"
          v-model="choice.title"
          placeholder="右边选择题目限选人数 若无限额请输入0"
        ></el-input>
        <el-input
          v-else
          style="width: 40%; margin-right: 20px"
          v-model="choice.title"
        ></el-input>
        <el-input-number
          v-if="signup"
          style="margin-right: 20px"
          v-model="choice.limit"
          @change="handleChange"
          :min="0"
          :max="9999"
        ></el-input-number
        ><el-button @click.prevent="removeDomain(choice)">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">确定</el-button>
        <el-button @click="addDomain">新增选项</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  export default {
    props: {
      closePanel: Function,
      questionnaire_id: Number,
      getQuestionnaire: Function,
      addQuestion: Function,
      signup: Boolean,
    },
    data() {
      return {
        form: {
          title: "",
          must: true,
          remark: "",
          questionnaire_id: null,
          question_id: null,
          username: localStorage.getItem("username"),
          type: "single",
          options: [
            {
              title: "",
              option_id: 0,
              limit: 0,
            },
            {
              title: "",
              option_id: 0,
              limit: 0,
            },
          ],
        },
        rules: {
          title: [{ required: true, message: "请输入题目名称", trigger: "blur" }],
        },
        timer: null,
      };
    },
    created() {
      this.form.questionnaire_id = this.questionnaire_id;
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 这里进行新建问题后的提交
            // 调用父组件的方法
            // 给后端传完整的问卷
            this.form["id"] = null;
            for (var i = 0; i < this.form.options.length; i++) {
              this.form.options[i]["id"] = null;
              // if(this.form.options[i].limit == 0) {
              //   console.log('合理')
              //   this.form.options[i].limit = null
              //   console.log(this.form.options[i].limit)
              // }
            }
            console.log("检查");
            console.log(this.form);
            this.addQuestion(this.form);

            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
              this.getQuestionnaire();
              this.closePanel();
            }, 200);
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      removeDomain(item) {
        if (this.form.options.length <= 2) {
          return;
        }
        var index = this.form.options.indexOf(item);
        if (index !== -1) {
          this.form.options.splice(index, 1);
        }
      },
      addDomain() {
        this.form.options.push({
          title: "",
          option_id: 0,
        });
      },
      cancel() {
        this.closePanel();
      },
    },
  };
</script>

<style scoped>
.el-input {
  width: 50%;
}

.el-form-item {
  display: flex;
  justify-content: center;
}
</style>